/*
 * @Author: hongbin
 * @Date: 2022-11-22 10:20:30
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-02 19:39:32
 * @Description:朋友头像列表
 */
import { FC, useCallback } from "react";
import styled, { css } from "styled-components";
import { UserInfo } from "../../../hook/useRegisterForm";
import { Capitalize, flexCenter } from "../../../styled";

interface IProps {
    list: UserInfo[];
    onChange: (user: UserInfo) => void;
    active: UserInfo["_id"];
    /**
     * 新消息标志
     */
    haveNewMessage: Record<string, boolean>;
}

const FriendsHead: FC<IProps> = ({ active, list, onChange, haveNewMessage }) => {
    return (
        <Container>
            {list.map((user: UserInfo) => (
                <Head key={user._id} active={active == user._id} onClick={() => onChange(user)}>
                    <Remind show={!!haveNewMessage[user._id]} />
                    <Portrait>{user.name.slice(0, 1)}</Portrait>
                    <Name>{user.name}</Name>
                </Head>
            ))}
        </Container>
    );
};

export default FriendsHead;

const Remind = styled.div<{ show: boolean }>`
    width: 0.5vmax;
    height: 0.5vmax;
    border-radius: 0.5vmax;
    background: #51f;
    position: absolute;
    top: 0;
    right: 15%;
    opacity: 0;
    ${({ show }) =>
        show &&
        css`
            opacity: 1;
        `}
`;

const Portrait = styled.span`
    ${Capitalize};
    background: #085304;
    color: #fff;
    width: 2vmax;
    height: 2vmax;
    border-radius: 2vmax;
    ${flexCenter};
`;

const Name = styled.span`
    font-size: 1vmin;
    color: #1fc616;
    /* color: #17ae10; */
`;

const Head = styled.div<{ active: boolean }>`
    ${flexCenter};
    flex-direction: column;
    margin: 0 0.5vmax;
    position: relative;
    cursor: pointer;
    ${({ active }) =>
        active &&
        css`
            ${Portrait} {
                background: #fff;
                color: #052800;
            }
            ${Name} {
                color: #fff;
            }
        `};
    :hover ${Portrait} {
        background: #0e7d09;
    }
`;

const Container = styled.div`
    height: 4vmax;
    width: calc(100% - 3vmax);
    margin: 0.5vmax;
    overflow: scroll hidden;
    display: flex;
    align-items: center;
    //firefox hidden scrollbar
    scrollbar-width: none;
`;
